<nz-card class="card-box">
  <div nz-row class="row">
    <div nz-col nzSpan="6" class="select-box">
      <label>网关分组:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        nzPlaceHolder="网关分组"
      ></nz-select>
    </div>
    <div nz-col nzSpan="6" class="select-box">
      <label>前端服务:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        nzPlaceHolder="前端服务"
      ></nz-select>
    </div>
    <div nz-col nzSpan="6" class="select-box">
      <label>前端API路径:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        nzPlaceHolder="前端API路径"
      ></nz-select>
    </div>
    <div nz-col nzSpan="6" class="select-box">
      <label>请求方法:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        nzPlaceHolder="请求方法"
      ></nz-select>
    </div>
  </div>

  <div nz-row class="row">
    <div nz-col nzSpan="6" class="select-box">
      <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;插件:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        nzPlaceHolder="插件"
      ></nz-select>
    </div>
    <div nz-col nzSpan="6" class="select-box">
      <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;访问:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        nzPlaceHolder="访问"
      ></nz-select>
    </div>
  </div>

  <div nz-row class="row">
    <div nz-col nzSpan="24">
      <button nz-button nzType="primary" nzSize="large" (click)="handleAdd()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        新增
      </button>
    </div>
  </div>
  <div nz-row class="row">
    <div nz-col nzSpan="24">
      <nz-table #borderedTable nzBordered [nzData]="dataSet">
        <thead>
          <tr>
            <th>#</th>
            <th>网关分组</th>
            <th>路由类型</th>
            <th>前端服务名</th>
            <th>前端API路径</th>
            <th>请求方法</th>
            <th>插件</th>
            <th nzWidth="20">访问</th>
            <th nzWidth="40">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of borderedTable.data">
            <td>{{ data.index }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.type | getType }}</td>
            <td>{{ data.serviceName }}</td>
            <td>{{ data.apiUrl }}</td>
            <td>{{ data.method | getMethod }}</td>
            <td>{{ data.plugin }}</td>
            <td>
              <nz-alert
                nzType="success"
                [nzMessage]="data.req | getReq"
              ></nz-alert>
            </td>
            <td class="del">
              <button nz-button nzType="primary" nzGhost>查看</button>
              <button nz-button nzType="primary" nzGhost>编辑</button>
              <button nz-button nzType="primary" nzGhost>删除</button>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>
